<!--
    vue-office文档：https://501351981.github.io/vue-office/examples/docs/config/event.html
-->
<template>
    <div class="file-mask">
        <vue-office-docx
            :src="`${realSrc}`"
            :style="scale"
            :options=" {
                breakPages: true
            }"
            class="file-content"
            @rendered="renderedHandler"
            @error="errorHandler"
        />
        <div class="toolbar el-image-viewer__btn el-image-viewer__actions">
            <div class="el-image-viewer__actions__inner">
                <i class="el-icon" @click="prevPage" title="上一页">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path>
                    </svg>
                </i>
                <i class="el-icon" @click="nextPage" title="下一页">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
                    </svg>
                </i>
                <i class="el-icon" @click="smallerSize" title="缩小">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704M352 448h256a32 32 0 0 1 0 64H352a32 32 0 0 1 0-64"></path>
                    </svg>
                </i>
                <i class="el-icon" @click="biggerSize" title="放大">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="m795.904 750.72 124.992 124.928a32 32 0 0 1-45.248 45.248L750.656 795.904a416 416 0 1 1 45.248-45.248zM480 832a352 352 0 1 0 0-704 352 352 0 0 0 0 704m-32-384v-96a32 32 0 0 1 64 0v96h96a32 32 0 0 1 0 64h-96v96a32 32 0 0 1-64 0v-96h-96a32 32 0 0 1 0-64z"></path>
                    </svg>
                </i>
                <i class="el-icon" @click="props.close" title="关闭">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
                        <path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path>
                    </svg>
                </i>
            </div>

<!--            <el-button @click="prevPage">上一页</el-button>-->
<!--            <el-button @click="nextPage">下一页</el-button>-->
<!--            <el-button @click="biggerSize">放大</el-button>-->
<!--            <el-button @click="smallerSize">缩小</el-button>-->
<!--            <el-button @click="props.close">关闭</el-button>-->
        </div>

    </div>

</template>

<script setup>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import {isHttp} from "../../utils/validate.js";
import { reactive, computed } from "vue";

const props = defineProps({
  src: {
    type: String,
    default: ""
  },
  close: {
      type: Function,
      default: () => {

      }
  },
  // 缩放比例配置
  scale: {
      type: Object,
      default: {
          // 当前比例
          currentScale: 1,
          // 最小比例
          minScale: 0.5,
          // 最大比例
          maxScale: 1.5,
          // 每次缩放的步长
          stepScale: 0.1
      }
  }
});



// 使用 reactive 创建响应式对象
const data = reactive({
    // 总页数
    pageTotal: 0,
    // 当前页码
    pageNum: 1,
    // 缩放比例
    scale: props.scale
});

/**
 * 上一页
 */
function prevPage() {
    if (data.pageNum == 1) {
        return;
    }
    // docx节点
    let docxContent = document.querySelector('.file-content');
    // 分页节点
    let pageNodes = document.querySelectorAll('.file-content .docx-wrapper section');

    if (pageNodes.length > 0 && data.pageNum > 1) {
        // 页码-1
        data.pageNum = data.pageNum - 1;
        docxContent.scrollTo({
            // 页节点距离父元素顶部距离
            top: pageNodes[data.pageNum - 1].offsetTop,
            // 平滑滚动
            behavior: 'smooth',
        });
    }
}

/**
 * 下一页
 */
function nextPage() {
    if (data.pageNum == data.pageTotal) {
        return;
    }
    // docx节点
    let docxContent = document.querySelector('.file-content');
    // 分页节点
    let pageNodes = document.querySelectorAll('.file-content .docx-wrapper section');

    if (pageNodes.length > 0) {
        // 页码+1
        data.pageNum = data.pageNum + 1;
        docxContent.scrollTo({
            // 页节点距离父元素顶部距离
            top: pageNodes[data.pageNum - 1].offsetTop,
            // 平滑滚动
            behavior: 'smooth',
        });
    }
}

/**
 * 放大
 * 按照一定比例发大预览窗口大小
 */
function biggerSize() {
    if (data.scale.currentScale < data.scale.maxScale) {
        data.scale.currentScale += data.scale.stepScale;
    }
}

/**
 * 缩小
 * 按照一定比例缩小预览窗口大小
 */
function smallerSize() {
    if (data.scale.currentScale > data.scale.minScale) {
        data.scale.currentScale -= data.scale.stepScale;
    }
}


/**
 * 渲染完成
 */
function renderedHandler() {
    // docx节点
    let docxContent = document.querySelector('.file-content');
    // 分页节点
    let pageNodes = document.querySelectorAll('.file-content .docx-wrapper section');
    data.pageTotal = pageNodes.length;
    if (pageNodes.length > 0) {
        // 设置里面的文档页的宽度和弹窗内容div宽度一致
        // 设置弹窗内容div宽度和里面的文档页的宽度一致
        docxContent.style.width = pageNodes[0].style.width;
    }
};


/**
 * 渲染失败
 */
function errorHandler() {
}

const realSrc = computed(() => {
    if (!props.src) {
        return;
    }
    if (isHttp(props.src)) {
        return props.src;
    }
    return import.meta.env.VITE_APP_BASE_API + props.src;
});

const scale = computed(() => `transform:scale(${data.scale.currentScale})`)


</script>

<style lang="scss" scoped>
.file-mask {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10;
    display: flex;
    align-items: center;

    .file-content {
        margin: 0 auto;
        width: 60%;
        height: 100%;

        :deep(.docx-wrapper) {
            padding: 0 0 0 0;
        }
    }

    .toolbar {
        position: fixed;
        bottom: 50px;
        margin: 0 auto;
        left: 50%;
        transform: translateX(-50%);
        z-index: 10;
    }
}
</style>
